<script setup>
    import { ElMessage } from 'element-plus'

    let dialogVisible = $ref(false)

    let form = $ref({})

    const handleClick = () => {
        if(!form.s3){
            ElMessage.warning('请输入岗位补贴金额~')
            return
        }else if(!form.s4){
            ElMessage.warning('请输入养老金额~')
            return
        }
        ElMessage.success('申请成功~')
        dialogVisible = false
    }

    const showDialog = (data) => {
        form = data
        dialogVisible = true
    }

    defineExpose({
        showDialog
    })

</script>

<template>
    <el-dialog
        v-model="dialogVisible"
        title="补贴申请"
        width="923px"
        custom-class="subsidy-info-dialog apply-dialog"
    >

        <div class="apply-info">
            <div class="title">基本信息</div>
            <div class="flex info-list">
                <span>姓名: {{ form.s1 }}</span>
                <span>身份证号: {{ form.s2 }}</span>
            </div>
            <div class="title">补贴信息</div>
            <el-form :inline="true" :model="form" :label-width="130">
                <el-form-item label="补贴开始时间">
                    <el-date-picker
                        v-model="form.s21"
                        type="date"
                    />
                </el-form-item>
                <el-form-item label="补贴结束时间">
                    <el-date-picker
                        v-model="form.s22"
                        type="date"
                    />
                </el-form-item>
                <el-form-item label="岗位补贴金额">
                    <el-input v-model="form.s23"></el-input>
                </el-form-item>
                <el-form-item label="养老金额">
                    <el-input v-model="form.s24"></el-input>
                </el-form-item>
            </el-form>
        </div>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleClick()">
                    申请
                </el-button>
            </span>
        </template>

    </el-dialog>
</template>

<style lang="less">
    .apply-dialog.el-dialog{
        padding-bottom: 20px;
        .apply-info{
            margin: 0 37px;
            background: rgba(0, 0, 0, 0.1);
            padding: 20px 12px;

            .title{
                color: #00EAFF;   
                font-size: 16px;
                padding-left: 10px;
                border-left: 6px solid #00A4FF;
                border-radius: 3px;
                margin-bottom: 20px;
            }

            .info-list{
                color: #fff;
                font-size: 16px;
                margin-bottom: 25px;

                span{
                    flex: 1;
                }
            }

            .el-date-picker, .el-input{
                width: 210px;
            }


        }
    }
</style>